<template>
    <div class="orders-detail">
        <h1>
            <span class="text">订单详情</span>
            <span class="black" @click="black">返回</span>
        </h1>
        <div class="product">
            <span>商品种类：<i>{{ orderDetailArr.length }}</i> 种</span>
            <span>商品数量：<i>{{ totalQuantity }}</i></span>
            <span class="price">总金额：<span>￥</span> <i>{{ totalAmount.toFixed(2) }}</i></span>
        </div>
        <div class="detail" :class="{ 'hide-scrollbar': hideScrollbar }">
            <OrderCard v-for="(item, index) in orderObj.orderDetails" :key="index" :orderInfo="item" :orderObj="orderObj">
            </OrderCard>
        </div>
    </div>
</template>
<script>
import OrderCard from './order_card/index'
export default {
    name: 'OrdersDetail',
    components: {
        OrderCard
    },
    mixins: [],
    props: {

    },
    data() {
        return {
            hideScrollbar: true, // 控制滚动条是否隐藏的数据属性
            orderObj: {},
            orderDetailArr: []
        }
    },
    computed: {
        totalQuantity() {
            return this.orderDetailArr.reduce((total, item) => {
                return total + item.productQty;
            }, 0)
        },
        totalAmount() {
            return this.orderDetailArr.reduce((total, item) => {
                return total + (item.productQty * item.productPrice)
            }, 0)
        }
    },
    watch: {

    },
    mounted() {
        this.getOrderData()
    },
    methods: {
        black() {
            this.$router.push('/orders')
        },
        getOrderData() {
            this.request.post('/order/selectOrderPage', {}).then(res => {
                if (res.code == 20000) {
                    // 订单状态，0-待付款，1-待发货，2-已发货，3-已取消
                    const result = res.data.list.find(item => item.id == this.$route.query.id)
                    this.orderObj = result
                    this.orderDetailArr = result.orderDetails
                }
            })
        },
    }
};
</script>
<style lang='less' scoped>
.orders-detail {
    width: 70%;
    margin: 0 auto;

    h1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px 0;

        .text {
            color: #333;
            font-weight: 600;
        }

        .black {
            font-size: 13px;
            color: rgb(23, 167, 224);
            text-decoration: underline;
            cursor: pointer;
        }
    }

    .product {
        display: flex;
        padding-bottom: 10px;
        font-size: 12px;

        span {
            margin-right: 30px;

            i {
                font-weight: 700;
            }

            span {
                margin-right: 0;
            }
        }
    }

    .detail {
        max-height: 560px;
        overflow-y: auto;
        box-shadow: 2px 2px 5px rgba(33, 33, 33, .1);
        border-radius: 10px;
    }

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
        /* 针对Webkit浏览器隐藏滚动条 */
    }

    .hide-scrollbar {
        scrollbar-width: none;
        /* 针对IE和Edge隐藏滚动条 */
    }
}
</style>